<template>
  <div class="header_item">
    <el-tooltip placement="bottom" effect="dark" content="设置">
      <svg class="iconpark-icon" @click="open">
        <use href="#config"></use>
      </svg>
    </el-tooltip>
    <el-drawer v-model="box" :with-header="false" size="15%" >
      <div>
        <el-divider content-position="left">布局</el-divider>
        <div class="layout_box">
          <el-container class="layout" @click="updateLayout('classic')">
            <el-aside
                style="background: #d3dce6; width: 20px; height: 70px"
            ></el-aside>
            <el-container>
              <el-header style="background: #b3c0d1; height: 10px"></el-header>
              <el-main style="background: #e9eef3; height: 60px">
                <div class="flag_tag">
                  <div>经典</div>
                </div>
              </el-main>
            </el-container>
          </el-container>
          <el-container class="layout" @click="updateLayout('default')">
            <el-aside
                style="background: #707071; width: 10px; height: 70px"
            ></el-aside>
            <el-aside
                style="background: #d3dce6; width: 20px; height: 70px"
            ></el-aside>
            <el-container>
              <el-header style="background: #b3c0d1; height: 10px"></el-header>
              <el-main style="background: #e9eef3; height: 60px">
                <div class="flag_tag">
                  <div>默认</div>
                </div>
              </el-main>
            </el-container>
          </el-container>
        </div>
      </div>
      <div style="font-size: 13px">
        <el-divider content-position="left">全局设置</el-divider>
        <el-row style="align-items: center;margin-bottom: 10px">
          <el-col :span="18"> 全局颜色设置</el-col>
          <el-col :span="6">
            <el-color-picker
                v-model="globalColor"
                :predefine="predefineColors"
                @change="globalColorSetting"
            />
          </el-col>
        </el-row>
        <el-row style="align-items: center;margin-bottom: 10px">
          <el-col :span="8"> 主题</el-col>
          <el-col :span="16">
            <el-select v-model="themeName" placeholder="请选择主题" @change="changeTheme">
              <el-option label="默认主题" value="theme_default"/>
              <el-option label="vip主题" value="theme_vip"/>
            </el-select>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
    <span> </span>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {getDarkColor, getLightColor} from "@/util/theme.js";

export default {
  data() {
    return {
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
      box: false,
      themeName: ""
    };
  },
  computed: {
    ...mapGetters(["globalColor", "model", "theme"]),
  },
  mounted() {
    if (this.globalColor) {
      this.globalColorSetting(this.globalColor);
    }
    if (this.model) {
      document.body.className = this.model;
    } else {
      document.body.className = "default";
    }
    if (this.theme) {
      this.themeName = this.theme
      this.changeTheme(this.themeName)
    }
  },
  methods: {
    globalColorSetting(value) {
      document.documentElement.style.setProperty(`--el-color-primary`, value);
      document.documentElement.style.setProperty(
          `--el-color-primary-dark-2`,
          `${getDarkColor(value, 0.1)}`
      );
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(
            `--el-color-primary-light-${i}`,
            `${getLightColor(value, i / 10)}`
        );
      }
      this.$store.dispatch("UpdateGlobalColor", value);
    },
    changeTheme(value) {
      let classList = document.body.classList
      for (let item of classList) {
        if (item.startsWith("theme")) {
          classList.remove(item)
        }
      }
      document.body.classList.add(this.themeName)
      this.$store.dispatch("UpdateTheme", value);
    },
    open() {
      this.box = true;
    },
    updateLayout(type) {
      this.$store.dispatch("UpdateModel", type);
      window.location.reload();
    },
  },
};
</script>

<style lang="scss" scoped>
.layout_box {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 分割为两列 */
  grid-template-rows: repeat(1, 1fr); /* 分割为两行 */
  color: #000;

  & .layout {
    padding: 5px;
    border: 1px solid transparent;

    &:hover {
      border: 1px solid #22c79f;
    }
  }
}

.flag_tag {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 100%;
  border: 2px solid #b3c0d1;
  left: 50%;
  top: 50%;
  position: relative;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;

  & div {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 100%;
    position: relative;
    border: 2px solid #b3c0d1;
    transform: rotate(30deg);
  }
}
</style>
